<template>
  <div class="view-content-all">
    <div class="view-content">
      <div class="view-top">基本信息<el-button type="success" plain size="mini" @click="toCustomerView">返回到会员列表</el-button></div>
      <el-row :gutter="20" style="margin: 10px 30px;">
        <el-col :span="6">
          <div><span>用户编号：</span><span>{{ info.user_id }}</span></div>
          <div><span>等级角色：</span><span>{{ getRoleName(info.member_type) }}</span></div>
          <div><span>上级id：</span><span>{{ info.recommend_id }}</span></div>
          <div><span>提现支付宝：</span> <el-link type="primary" @click="showCode(info.alipay_2dimension_Code)">查看</el-link></div>
        </el-col>
        <el-col :span="6">
          <div><span>手机号码：</span><span>{{ info.phone }}</span></div>
          <div><span>账户余额：</span><span>{{ info.recharge_balance }}</span></div>
          <div><span>我的上级：</span><span>{{ info.recommend_name }}</span></div>
          <div><span>创建时间：</span><span>{{ info.create_time }}</span></div>
        </el-col>
        <el-col :span="6">
          <div><span>用户姓名：</span><span>{{ info.user_name }}</span></div>
          <div><span>团队id：</span><span>{{ info.team_id === 0 ? '' : info.team_id }}</span></div>
          <div><span>我的上上级：</span><span>{{ info.grandpa_name }}</span></div>
        </el-col>
        <el-col :span="6">
          <div><span>微信昵称：</span><span>{{ info.nickname }}</span></div>
          <div><span>团队名称：</span><span>{{ info.team_name }}</span></div>
          <div><span>总收入:</span><span>{{ info.total_commodity_commossion }}</span></div>
        </el-col>
      </el-row>
    </div>
    <!--查看二维码弹框-->
    <showQRCode ref="qrCode" />
  </div>
</template>

<script>
import showQRCode from './showQRCode'
import { getRoleName } from '@/utils/commen'
import { getupuasrs } from '@/api/mall/customer'
export default {
  components: { showQRCode },
  data() {
    return {
      info: {},
      equityCard: []
    }
  },
  created() {
    // 实体类置空
    this.info = {}
    // 实体类重新赋值
    this.info = this.$route.query.info
    // 获得上级和上上级信息
    getupuasrs(this.info.recommend_id).then(res => {
      this.info.recommend_name = res.fatherMap ? res.fatherMap.user_name : ''
      this.info.grandpa_name = res.grandpaMap ? res.grandpaMap.user_name : ''
      console.log('this.info', this.info)
    })
  },
  methods: {
    getRoleName,
    toCustomerView() {
      // 返回客户列表页面
      this.$router.push({ path: '/customer/viewCustomer' })
    },
    showCode(url) {
      // 查看二维码弹框，提现微信、提现支付宝
      this.$refs.qrCode.dialog = true
      this.$refs.qrCode.qrCodeUrl = url
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
  .view-content-all {
    background-color: #9d8c8c24;
    padding: 10px;
  }
  .view-content {
    background-color: #ffffff;
  }
  .view-top {
    font-size: 18px;
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
  }
  .view-top .el-button {
    float: right;
  }
  .el-row .el-col div{
    margin-bottom: 50px;
  }

</style>
